前言：打好 TypeScript 基礎，輕鬆面對物件類型挑戰

在開發過程中，我們經常面臨物件結構複雜、型別不一致的問題。
透過 TypeScript 的強大型別系統，你可以更精準地掌握物件的型別，避免常見的程式錯誤。

本文將帶你深入了解如何運用 TypeScript 的物件處理技巧，幫助你寫出穩定、易維護的程式碼，讓開發變得更輕鬆有趣。

基礎介紹

我們從一個簡單的結構開始，這個結構代表一筆訂單，包含了商品和客戶資訊。我們定義了一個 defaultOrder 物件，這個物件作為我們型別定義和驗證的原型。

const defaultOrder = {
  articles: [
    {
      price: 1200.50,
      vat: 0.2,
      title: 'Macbook Air Refurbished - 2013'
    },
    {
      price: 9,
      vat: 0,
      title: 'I feel smashing subscription'
    }
  ],
  customer: {
    name: 'Fritz Furball',
    address: {
      city: 'Smashing Hill',
      zip: '90210',
      street: 'Whisker-ia Lane',
      number: '1337'
    },
    dateOfBirth: new Date(2006, 9, 1)
  }
}

使用 typeof 抽取型別

TypeScript 的 typeof 運算子可以直接從現有的物件中抽取型別，確保型別與物件保持同步。在範例中，我們從 defaultOrder 物件中抽取出型別 Order：

type Order = typeof defaultOrder;

使用 typeof 的好處在於它能精準地捕捉物件的結構，避免重複且容易出錯的手動型別定義。這樣的做法完美符合 TypeScript 的 DRY（Don’t Repeat Yourself）原則。

（下一篇再來好好談到什麼是DRY原則）

實作類型安全的函式

接下來我們實作一個函式 checkOrders，它接受一個 Order 型別的陣列，並檢查每筆訂單是否包含商品。此函式透過使用 defaultOrder 抽取的型別，強調了類型安全的重要性。

/**
 * 檢查所有訂單是否都有商品
 */
function checkOrders(orders: Order[]): boolean {
  let valid = true;
  for (let order of orders) {
    valid = valid && order.articles.length %3E 0;
  }
  return valid;
}

實作重點

1. 類型安全：透過 typeof 定義 Order，我們保持了程式碼中型別的一致性，這樣的做法能減少因結構不符而引入的錯誤風險。

2. 函式類型註記：checkOrders 函式明確指定了參數型別 (orders: Order[]) 及回傳型別 (boolean)，提供了清晰的文件說明，並能讓 TypeScript 在編譯時期捕捉錯誤。

3. 迭代驗證：函式會遍歷每一筆訂單，檢查 articles 陣列中是否有至少一項商品。使用 Order 型別確保我們訪問 articles 這樣的屬性時，是受類型檢查保護的，避免了執行時因打錯字或缺少欄位導致的錯誤。

演練場
TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript

使用 TypeScript 處理物件的最佳實踐

1. 使用 typeof 抽取型別：盡可能從物件中使用 typeof 抽取型別，這能確保型別與實際資料保持一致，減少手動維護的麻煩。

2. 明確類型註記：對於函式的參數和回傳值，應該明確標註型別。這不僅提升了程式碼的可讀性，還能讓 TypeScript 提早捕捉錯誤。

3. 重視類型安全勝於靈活性：雖然 JavaScript 容許對物件進行靈活的操作，但 TypeScript 鼓勵對物件結構進行明確且安全的處理。養成類型優先的思維，能防止複雜應用程式中出現預期外的行為。

結論

• TypeScript 型別系統的正確姿勢：正確使用型別系統的好處不用多說。
• 使用 typeof 抽取型別：確保型別準確性，可以避免手動錯誤。
• Object Type Tool Belt 方法：突顯類型安全，讓 TypeScript 成為開發穩定軟體的好幫手。